
<template>
	<div class="full-height">

		<van-nav-bar v-if="isTitle || switch153 === 1" fixed title="促销列表" left-arrow class="head-color color-white"
			@click-left="clickLeft" />
		<div v-else class="flex flex-v-c head-color pos-f">
			<svg-icon icon-class="right" class="fs-22 mt-20 tran color-white" @goPage="clickLeft" />
			<div class="text-show-line-1 color-white fs-28 ml-20" @click="nearbyShopShow = true">
				<svg-icon icon-class="location" class="mr-10 " @goPage="nearbyShopShow = true" />
				{{ storeName }}
			</div>
		</div>
		<!-- 超值团购-->
		<div class="head-color scrollBox" id="scrollBox" ref="scrollBox">
			<div class="head-top">
				<div>
					<img src="../../assets/images/pro_bg.png" />
				</div>
				<div class="title">
					<div class="flex nav_title">
						<img src="../../assets/images/wheat_left.png" />
						<div class="mr-24">
							<svg-icon icon-class="checked" class="icon_color" />
							平台严选
						</div>
						<div class="mr-24">
							<svg-icon icon-class="checked" class="icon_color" />
							100正品
						</div>
						<div class="mr-24">
							<svg-icon icon-class="checked" class="icon_color" />
							极速发货
						</div>
						<div class="mr-24">
							<svg-icon icon-class="checked" class="icon_color" />
							退换无忧
						</div>
						<img src="../../assets/images/wheat_right.png" />
					</div>
				</div>
				<div class="scrollClass" id="scrollBox">
					<li v-for="(item, index) in statusList" :key="index" :name="item.ID" @click="tabClick(item, index)"
						:class="classActive === index ? 'activeClass' : ''">
						<div class="fs-30 fs-name tac text-show-line-1">{{ item.Name }}</div>
					</li>
				</div>
			</div>

			<div class="pt-460">
				<div class="bg-white flex flex-s-c pd-24 mlr-24 br-8" v-if="EndTime !== ''">
					<div class="fs-28">
						<img src="../../assets/images/pro_clock.png" style="width: 24px;" />
						<span>距离活动结束仅剩</span>
					</div>
					<div class="pro_time">
						<p>{{ days }}</p> <span class="mt-6">天</span>
						<p>{{ hours }}</p>:
						<p>{{ minutes }}</p>:
						<p>{{ seconds }}</p>
					</div>
				</div>
				<van-list class="plr-24" v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
					@load="moreData">
					<div class="mtb-24" v-if="groupdata.length > 0">
						<div class="info bg-white" v-for="(item, index) in groupdata" :key="index" @click="goBuy(item)">
							<imgBox :img-url="item.ThumbnailUrl410" class="is-216 br-16 picimg" />
							<div class="inforight">
								<div>
									<p class="infoname mb-12">{{ item.ProductName }}</p>
									<div>
										<div class=" specall " v-for="(iitem, index) in item.TagsList" :key="index">
											<div class="spec ">{{ iitem.Name }}</div>
										</div>
										<div class="solidheight" v-if="item.TagsList.length === 0"></div>
									</div>
								</div>
								<div class="pos-r">
									<div class="price">
										<div class="cssSaleMinPrice">
											<span class="fs-24 ">￥</span>
											<span class="fs-40 fw-b mr-5">{{ item.V_GradePrice }}</span>
										</div>
										<div class="fs-24 originprice mt-10" v-if="item.MarkePrice != 0">￥{{ item.MarkePrice }}</div>
									</div>
									<div class="pos-a light">
										<div class="goBuy" @click="goBuy(item)">去抢购</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</van-list>
			</div>
		</div>
		<van-popup v-model="nearbyShopShow" position="bottom" style="height:100vh;">
			<nearbyShop @close="nearbyShopShow = false" :isActive="isActive" @changeStore="changeStore" />
		</van-popup>

	</div>
</template>
<script>
import imgBox from 'components/imgBox';
import SvgIcon from 'components/SvgIcon'
import { GetNowTime, GetSalesPolicyList } from 'api/activity'
import { GetUserDetail } from 'api/member'
import { GetStoreInfo } from 'api/store'
import { GetWholeSaleListForSku } from 'api/product'
import { GetBusinessFunction } from 'api/businessSetting'
import nearbyShop from '../shopProductList/nearbyShop.vue'
export default {
	components: {
		imgBox, SvgIcon, nearbyShop
	},
	data() {
		return {
			loading: false, // 加载load
			finished: false, // 无更多数据
			storeId: 0,
			groupdata: [],
			requestData: {
				"pageIndex": 1,
				"pageSize": 10
			},
			isRetail: 0, //0批发 1零售
			isTitle: true,
			storeName: '请选择门店',
			nearbyShopShow: false, //门店弹窗
			switch153: 0,
			isActive: true,
			// 滚动状态
			totalAmout: 0,
			scollRequest: true,
			end: false,
			statusList: [],
			classActive: 0,
			days: 0,
			hours: 0,
			minutes: 0,
			seconds: 0,
			EndTime: '',
		}
	},
	created() {
		localStorage.removeItem('storeId')
		if (this.$route.params.id === '1') {
			this.isTitle = false
		}
		this.isRetail = this.$route.params.id
		if (this.$route.query.storeId) {
			this.storeId = this.$route.query.storeId
			this.requestData.storeId = this.storeId
			this.GetStoreInfo()
		} else if (localStorage.getItem('storeId')) {
			this.storeId = localStorage.getItem('storeId')
			this.requestData.storeId = this.storeId
			this.GetStoreInfo()
		} else if (this.$route.params.id === '1') {
			this.GetUserDetail()
		}

		if (this.$route.query.hideStore === '1') {
			this.isTitle = true
		}
		this.GetSalesPolicyList()
		this.setInterval()
	},
	mounted() {

		this.$nextTick(function () {
			document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
		})
	},
	methods: {
		tabClick(item, num) {
			this.classActive = num
			this.requestData = {}
			this.requestData.pageIndex = 1
			this.requestData.pageSize = 10
			this.requestData.storeId = this.storeId
			this.groupdata = []
			this.totalAmout = 0
			this.EndTime = item.EndTime
			switch (item.ProductSource) {
				case 1:
					this.requestData.productLineIds = item.ProductSourceIds
					break;
				case 2:
					this.requestData.type = item.ProductSourceIds
					break;
				case 3:
					this.requestData.productIds = item.ProductSourceIds
					break;
				case 4:
					this.requestData.skuIds = item.ProductSourceIds
					break;
				default:
					break;
			}
			this.$nextTick(() => {
				this.getgroupdata()
			});
		},
		GetSalesPolicyList() {
			const obj = {}
			obj.isRetail = this.isRetail
			GetSalesPolicyList(obj).then(res => {
				if (res.Data && res.Data.length > 0) {
					this.statusList = res.Data
					this.EndTime = res.Data[0].EndTime
					var source = res.Data[0].ProductSource
					switch (source) {
						case 1:
							this.requestData.productLineIds = res.Data[0].ProductSourceIds
							break;
						case 2:
							this.requestData.type = res.Data[0].ProductSourceIds
							break;
						case 3:
							this.requestData.productIds = res.Data[0].ProductSourceIds
							break;
						case 4:
							this.requestData.skuIds = res.Data[0].ProductSourceIds
							break;
						default:
							break;
					}
					this.$nextTick(() => {
						this.getgroupdata()
					});
				} else {
					this.finished = true
				}
			})
		},
		tabChange(e) { },
		// tab置顶
		scroll(data) {
			if (data.isFixed) {
				this.$refs.tabs.$refs.nav.classList.add('van-tabs__nav_Fixed')
			} else {
				this.$refs.tabs.$refs.nav.classList.remove('van-tabs__nav_Fixed')
			}
		},
		GetStoreInfo() {
			const obj = {}
			obj.id = this.storeId
			GetStoreInfo(obj).then(res => {
				if (res.Data) {
					this.storeName = res.Data.Name
				}
			})
		},
		GetUserDetail() {
			GetUserDetail().then(res => {
				if (res.Data) {
					this.storeId = res.Data.DisId
					this.requestData.storeId = this.storeId
					if (this.storeId !== 0) {
						this.GetStoreInfo()
					}
				}
			})
		},
		//获取开关权限
		GetBusinessFunction() {
			GetBusinessFunction(153).then(res => {
				if (res) {
					this.switch153 = res.Data[0].Value;
				}
			})
		},
		changeStore(item) {
			this.storeId = item.ID
			this.storeName = item.Name
			this.nearbyShopShow = false
			this.requestData.storeId = this.storeId
			this.requestData.pageIndex = 1
			this.groupdata = []
			if (this.EndTime !== '') {
				this.getgroupdata()
			} else {
				this.finished = true
			}
		},
		getgroupdata() {
			const _this = this
			_this.loading = true
			if (this.isRetail === '0') {
				this.requestData.storeId = 0
			}
			GetWholeSaleListForSku(this.requestData).then((res) => {
				if (res.Data) {
					if (res.State == 0) {
						return
					}
					if (_this.requestData.pageIndex >= res.Data.TotalAmout) {
						_this.finished = true
					} else {
						_this.finished = false
					}
					_this.loading = false
					_this.totalAmout = res.Data.TotalAmout
					_this.groupdata = _this.groupdata.concat(res.Data.Data)
				} else {
					_this.finished = true
					_this.loading = false
				}
			})
		},
		// 滚动事件触发下拉加载
		onScroll() {
			const _this = this
			if (_this.scollRequest === true) {
				if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
					_this.scollRequest = false
					// alert('触发！！！')
					console.log('加载')
					_this.scollTop = this.$utils.getScrollTop('scrollBox')
					if (_this.requestData.pageIndex < _this.totalAmout) {
						_this.requestData.pageIndex++
						_this.getgroupdata()
					} else {
						console.log('end')
						_this.end = true
					}
					// }
				}
			}
		},
		// 上拉加载更多
		moreData() {
			this.requestData.pageIndex = this.requestData.pageIndex + 1
			this.getgroupdata()
		},
		//立即购买
		goBuy(item) {
			let id = item.ID
			let store_id = this.storeId
			console.log(store_id, "id")
			if (store_id > 0) {
				localStorage.setItem('storeId', store_id)
			}
			if (this.isRetail === '1') {
				window.location.href = this.$LocalDomain + '/circle/#/quickPlaceOrder/retailDetail/' + id + '?storeId=' + store_id
			} else {
				window.location.href = this.$LocalDomain + '/circle/#/quickPlaceOrder/detail/' + id
			}
		},

		clickLeft() {
			localStorage.removeItem('storeId')
			this.$utils.back(this.$route.path)
		},
		setInterval() {
			this.showPayTime = true
			var that = this;
			//当前时间
			GetNowTime().then(rsp => {
				if (rsp.State == 1) {
					that.nowTime = new Date(rsp.Data.replace(/-/g, '/')).getTime();
					that.interval = setInterval(e => {
						that.nowTime += 1000;
						var diff = new Date(this.EndTime.replace(/-/g, '/')).getTime() - this.nowTime; //时间差的毫秒数
						if (diff <= 0) {
							clearInterval(that.interval)
							return
						}
						that.setCountDown1();
					}, 1000)
				}
			})
		},
		//秒杀设置倒计时
		setCountDown1() {
			if (!this.nowTime || !this.EndTime) {
				return;
			}

			var diff = new Date(this.EndTime.replace(/-/g, '/')).getTime() - this.nowTime; //时间差的毫秒数
			if (diff < 0) {
				diff = new Date(this.EndTime.replace(/-/g, '/')).getTime() - this.nowTime; //时间差的毫秒数
			}
			if (diff >= 0) {
				//计算出相差天数
				var days = Math.floor(diff / (24 * 3600 * 1000));
				//计算出小时数
				var leave1 = diff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				this.days = (days > 9 ? "" : "0") + days
				this.hours = (hours > 9 ? "" : "0") + hours
				this.minutes = (minutes > 9 ? "" : "0") + minutes
				this.seconds = (seconds > 9 ? "" : "0") + seconds
			} else {
				this.showPayTime = false
				this.remainder = ''
			}
		},
	}
}
</script>
<style lang="scss" scoped>
.full-height {
	height: 100vh;
	background: #FFF8F1;
}

.color-white {
	/deep/.van-icon {
		color: #fff;
	}

	/deep/.van-nav-bar__title {
		color: #fff;
	}
}

.head-color {
	background: none;
}

.info {
	border-radius: 16px;
	height: 248px;
	padding: 10px;
	display: flex;
	margin-bottom: 16px;

	.picimg {
		width: 232px;
		border-radius: 16px;
		overflow: hidden;
	}
}

.inforight {
	width: calc(100% - 232px);
	margin-left: 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.infoname {
		font-size: 30px;
		font-weight: 600px;
		overflow: hidden;
		text-overflow: -o-ellipsis-lastline;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.specall {
		display: inline-flex;
		margin-bottom: 20px;
	}

	.spec {
		background: #FEF8E1;
		border-radius: 8px;
		color: #FE8000;
		text-align: center;
		font-size: 22px;
		margin-right: 15px;
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
	}

	.originprice {
		text-decoration: line-through;
		color: #B2B2B2;
	}

	.msbtn {
		width: 140px;
		height: 62px;
		line-height: 62px;
		text-align: center;
		background: #FF2234;
		border-radius: 34px;
		color: white;
	}
}

.cssSaleMinPrice {
	color: #F32815;
	height: 48px;
	line-height: 48px;
}

.pin {
	background: #FFEBEE;
	border-radius: 4px 0px 0px 4px;
	font-size: 22px;
	color: #F32815;
	padding: 0 4px;
}

.endtime {
	color: #F32815;
	font-size: 20px;
	border-radius: 0px 4px 4px 0px;
	border: 1px solid #FFEBEE;
	padding: 0 5px;
}

.tran {
	transform: rotateZ(180deg);
	margin: 0 20px;
}

.store-name {
	width: 388px;
	height: 64px;
	line-height: 64px;
	background: linear-gradient(273deg, #FE5461 0%, #FF755A 26%, #FE190E 100%);
	border-radius: 32px;
	border: 1px solid #fff;
	//border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 175, 167, 1)) 2 2;
	font-size: 28px;
	color: #fff;
	padding: 0 20px;
}

.pos-f {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1111;
	height: 88px;
}

/deep/.van-hairline--bottom:after {
	border-bottom: none;
}

.goBuy {
	width: 162px;
	height: 64px;
	line-height: 64px;
	background: linear-gradient(180deg, #F66833 0%, #EA3717 100%);
	font-size: 28px;
	color: #fff;
	text-align: center;
	z-index: 99;
	border-radius: 0 8px 8px 0;
}

.price {
	width: 350px;
	height: 64px;
	background: #FFF0E8;
	border-radius: 8px;
	display: flex;
	align-items: center;
	padding: 0 10px;
}

.light {
	right: 0;
	bottom: 0;
}

.title {
	background: linear-gradient(180deg, #FFD5BF 0%, #FFFFFF 100%);
	border-radius: 24px 24px 0px 0px;
	height: 106px;
	z-index: 11;
	position: relative;
	margin-top: -44px;
}

.nav_title {
	justify-content: center;
	padding-top: 12px;

	img {
		width: 25px;
		height: 37px;
		margin-right: 24px;
	}
}

.icon_color {
	color: #BE5D16;
}

/deep/.van-tabs__nav {
	border-radius: 12px 12px 0 0;
	background: #FFF8F1;
}

/deep/.van-tabs {
	z-index: 999;
	margin-top: -19px;
	background: #FFF8F1;
}

/deep/.van-tab--active {
	color: #EB3C1A;
}

/deep/.van-tabs__line {
	background: #EB3C1A;
}

.head-top {
	//height: 353px;
	position: relative;
	position: fixed;
	z-index: 999;
	top: 0;
}

.scrollClass {
	display: flex;
	overflow-x: auto;
	position: absolute;
	bottom: -50px;
	z-index: 1111;
	background: #FFF8F1;
	border-radius: 24px 24px 0 0;
	padding: 24px 24px 10px;
	width: 100%;

	li {
		width: 33%;
		//color: #EB3C1A;
		flex-shrink: 0;
		margin: 0 10px;
		padding-bottom: 20px;
	}
}

.activeClass {
	color: #EB3C1A;
	border-bottom: 3px solid #EB3C1A;
}

::-webkit-scrollbar {
	/* 隐藏滚动条 */
	display: none;
}

.pro_time {
	display: flex;
	align-items: center;

	p {
		width: 40px;
		height: 40px;
		line-height: 40px;
		background: #EB3C1A;
		border-radius: 4px;
		color: #fff;
		text-align: center;
		margin: 0 8px;
	}
}

/deep/.van-list {
	background: #FFF8F1;
}

.pt-460 {
	padding-top: 460px;
}
</style>
